<template>
  <el-drawer
    class="my_dra"
    title="属性"
    :visible.sync="drawer"
    :direction="direction"
    :before-close="handleClose"
    size="60%"
  >
    <div
      slot="title"
      class="my_required"
      style="font-size: 16px; font-weight: 600"
    >
      属性
    </div>
    <div class="dw_box">
      <div class="attr_dw_box">
        <div class="title_top">
          <div class="title">填充属性值</div>
          <el-input
            style="width: 319px"
            placeholder="请输入"
            suffix-icon="el-icon-search"
            v-model="search"
            size="small"
          >
          </el-input>
        </div>
        <el-form
          ref="form"
          :model="form"
          label-width="auto"
          v-if="searchData.length !== 0"
        >
          <el-row :gutter="20">
            <el-col
              class="attr_value"
              :span="12"
              v-for="item in searchData"
              :key="item.name"
            >
              <el-form-item :label="item.name" class="label_box">
                <span slot="label">{{ item.name }} ({{ item.type[0] }}):</span>
                <div class="a_input">
                  <el-input
                    style="width: 100%"
                    v-model="item.value"
                    placeholder="请输入"
                    size="small"
                    :disabled="item.isCheck"
                    clearable
                  ></el-input>
                  <div class="sett_text">设置为空</div>
                  <el-switch v-model="item.isCheck" @change="item.value = ''">
                  </el-switch>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div v-if="searchData.length == 0" class="no_data">无匹配项</div>
      </div>
      <div class="bottom">
        <div class="all_btn">
          全部设置为空
          <el-switch
            @change="handAll"
            style="margin-left: 6px"
            v-model="allCheck"
          >
          </el-switch>
        </div>
        <div class="btns">
          <el-button size="small" type="primary" @click="sub">确定</el-button>
          <el-button size="small" @click="drawer = false">取消</el-button>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
export default {
  props: {
    // drawer: {
    //   type: Boolean,
    //   default: false,
    // },
  },
  computed: {
    searchData: function () {
      var search = this.search;
      if (search) {
        return this.cloneAttr.filter(function (product) {
          return Object.keys(product).some(function (key) {
            return String(product[key]).toLowerCase().indexOf(search) > -1;
          });
        });
      }

      return this.cloneAttr;
    },
  },
  data() {
    return {
      allCheck: false,
      form: {},
      search: "",
      cloneAttr: [],
      drawer: false,
      direction: "rtl",
    };
  },
  methods: {
    sub() {
      this.drawer = false;
      this.$emit("sumbit", this.cloneAttr);
    },
    handAll() {
      this.cloneAttr = this.cloneAttr.map((item) => {
        return {
          ...item,
          value: "",
          isCheck: this.allCheck,
        };
      });
    },
    handleClose(done) {
      done();
      //   this.$confirm("确认关闭？")
      //     .then((_) => {
      //       done();
      //     })
      //     .catch((_) => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.my_dra /deep/ .el-drawer__header {
  margin-bottom: 20px;
}
.no_data {
  margin: 10px auto;
  width: 80%;
  text-align: center;
  /* margin-top: 50px; */
  color: #999;
}
.dw_box {
  /deep/ .el-switch__core::before {
    content: "否";
    position: absolute;
    top: 0;
    right: 5px;
    color: #fff;
  }
  .is-checked /deep/ .el-switch__core::before {
    content: "是";
    position: absolute;
    top: 0;
    left: 5px;
    color: #fff;
  }
}
.bottom {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  .btns {
    display: flex;
    justify-content: flex-end;
    padding: 14px;
  }
  .all_btn {
    padding-right: 16px;
    background-color: #f5f5f5;
    height: 42px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 13px;
    color: #333333;
  }
}

.attr_dw_box {
  height: calc(100vh - 130px - 40px);
  overflow-y: auto;

  padding: 0 30px;
  border-top: 1px solid #e4e4e4;
  padding-top: 16px;

  /deep/ .el-form-item {
    margin-bottom: 10px;
  }
  /deep/ .el-form-item__label {
    width: 100%;
    padding-bottom: 0;
    position: relative;
    font-weight: 400;
    color: #666666;
    font-size: 12px;
  }
  .title_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      color: #333333;
      font-size: 16px;
      font-weight: 600;
    }
  }
  .attr_value {
    /* display: flex; */
    /* flex-direction: column; */
    margin-top: 16px;
    /* width: 100%; */

    .a_input {
      display: flex;
      align-items: center;
      .sett_text {
        color: #333333;
        font-size: 13px;
        margin: 0 8px;
        white-space: nowrap;
      }
    }
    .a_title {
      color: #666666;
      font-size: 12px;
      margin-bottom: 4px;
    }
  }
}
</style>